<template>
  <view class="custom-navbar" :style="{ backgroundColor: '#008CF8', color: 'white', height: navHeight }">
    <!-- 返回箭头图片 -->
    <image class="icon" src="/static/images/返回箭头(2).png" @click="goback()"></image> 
    <!-- 导航栏标题 -->
    <text class="navbar-title" :style="{ fontSize: navFontSize }">{{ title }}</text>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '标题'
    },
  },
  data() {
    return {
      navHeight: '', // 导航栏高度
      navFontSize: '' // 导航栏字体大小
    };
  },
  mounted() {
    uni.getSystemInfo({
      success: (res) => {
        // 根据设备屏幕大小设置导航栏高度和字体大小
        if (res.platform === 'android') {
          this.navHeight = res.statusBarHeight + 48 + 'px';
          this.navFontSize = '16px';
        } else {
          this.navHeight = res.statusBarHeight + 44 + 'px';
          this.navFontSize = '18px';
        }
      }
    });
  },
  methods: {
    goback() {
      // 调用 uni.navigateBack 方法返回上一页
      uni.navigateBack({
        delta: 1 // delta 表示返回的页面数，1 表示返回上一页
      });
    }
  }
};
</script>

<style>
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: center; /* 水平居中 */
}

.icon {
  width: 25px; /* 放大返回箭头 */
  height: 25px;
  position: absolute; /* 使用绝对定位 */
  left: 20px; /* 距离左边 20px */
  top: 50%; /* 先将元素顶部置于导航栏垂直中心 */
  transform: translateY(-50%); /* 再向上平移自身高度的一半，实现垂直居中 */
}

.navbar-title {
  color: white;
  text-align: center; /* 文字水平居中 */
  margin: 0 auto; /* 确保标题在导航栏中水平居中 */
}
</style>    